<template>
	<view class="container">

		<view class="large" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
			<view class="info">
				<view class="name">
					{{item.title}}
				</view>
				<view class="boxbottom">
					<view class="describe">
						{{item.content}}
					</view>
					<view class="date">
						{{item.date}}
					</view>
				</view>


			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					uid:''
				},
				list: []
			}
		},
		onLoad() {
			let uid = uni.getStorageSync('uid');
			this.params.uid = uid
			uni.request({
				url: 'http://aicreation.lipux.cn/getArticle',
				data: this.params,
				method: 'POST',
				success: (res) => {
					console.log(res);
					if (res.data.code === 200) {
						console.log(res.data.data);
						this.list = res.data.data
					} else {
						uni.showToast({
							"title": "账号或密码错误",
							"icon": 'none'
						})
					}
				},
				fail: (err) => {
					console.log(err)
				}
			})
		},
		methods: {
			toDetail(item) {
				uni.setStorageSync('article', item);
				uni.navigateTo({
					url:'../historyArticle/historyArticle'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		width: 100vw;
		min-height: 100vh;
		background-color: #fafafa;
	}
	.container {
		// width: 100vw;
		// min-height: 100vh;
		// background-color: #ececec;
		margin: 30rpx;
	}
	
	
	

	.large {
		position: relative;
		// width: 95%;
		// height: 120px;
		margin:0 0 10px 0;
		background-color: #2a82e417;
		border-radius: 10px;
		padding: 10px;
		box-sizing: border-box;
		overflow: hidden;
		padding-bottom: 20px;
	}

	.photo {
		display: inline-block;
		width: 50px;
		height: 50px;
		margin: 2%;

		image {
			width: 100%;
			height: 100%;
			
		}
	}

	.name {
		font-size: 19px;
		font-weight: 550;
		margin: 10px 10px;
		border-bottom: 1px solid #dddddd;
		color: #2a82e4;
		padding-bottom: 15px;
	}
	
	.boxbottom {
		width: 100%;
		.date{
			margin: 10px;
			color: #00091378;
		}
		
	}
	
	.describe {
		display: inline-block;
		margin: 10px 10px;
		font-size: 17px;
		height: 50px;
		line-height: 25px;
		vertical-align:top;
		    word-break: break-all;
		    text-overflow: ellipsis;
		    display: -webkit-box;
		    -webkit-box-orient: vertical;
		    -webkit-line-clamp: 2; /* 这里是超出几行省略 */
		    overflow: hidden;
	}
	.price {
		color: #ff8382;
	}

	.circle {
		position: absolute;
		top: 20px;
		right: -20px;
		font-size: 50px;
		font-weight: 300;
		color: #c6d9df;
		-moz-transform: rotate(-40deg);
		-webkit-transform: rotate(-40deg);
		// border: 1px solid #ccc;
		border-radius: 20%;
	}
</style>
